<script setup>
import { computed, ref, onBeforeMount } from 'vue';
// pinia的使用
import { useAppStore } from '../../../stores/app';
import { toRefs } from 'vue';
const { langIndex } = toRefs(useAppStore());

import input from '../../../assets/data/input.json'
console.log(input);
const stepCompute = computed(() => { return Object.keys(input.compute).map(key => input.compute[key]).filter((item, index) => index !== 0 && index !== 1) });
console.log(stepCompute.value);
const stepComputeDesc = computed(() => { return stepCompute.value.slice(0, 3).map(item => item.def) })
console.log(stepComputeDesc.value);

onBeforeMount(() => {
    initializeData();
});
// 动态数据以表格形式展现出来
const columns1 = ref([]);
const tableData1 = ref([]);
const initializeData = () => {
    // my 2D array data
    const data = [
        ['Name', 'Age', 'City'],
        ['John1', 30, 'New York'],
        ['Alice1', 28, 'Los Angeles'],
        ['Bob1', 25, 'Chicago'],
        ['John2', 30, 'New York'],
        ['Alice2', 28, 'Los Angeles'],
        ['Bob2', 25, 'Chicago'],
        ['John3', 30, 'New York'],
        ['Alice3', 28, 'Los Angeles'],
        ['Bob3', 25, 'Chicago']
    ];
    columns1.value = data[0];
    tableData1.value = data.slice(1).map((row) => Object.fromEntries(columns1.value.map((col, i) => [col, row[i]])));

};

</script>
<template>
    <div style="display: grid; gap: 10px;">
        <div class="flex gap-2" v-for="(item, index) in stepCompute.slice(0, 3)" :key="index">
            <label for="username" style="display: flex;align-items: center;">{{ item.lang[langIndex] }}</label>
            <InputText id="username" v-model=stepComputeDesc[index] aria-describedby="username-help"
                style="width: 300px;height: 35px;" />
        </div>
    </div>
    <!-- 分隔符 -->
    <Divider type="dashed" />
    <!-- 分隔符 -->
    <DataTable :value="tableData1"  editMode="cell">
        <!-- 表格数据 -->
        <Column v-for="(col, index) in columns1" :key="index" :field="col" :header="col" />

    </DataTable>
</template>
